<template>
  <div
    style="
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex-shrink: 0;
    "
  >
    <div class="leftPanel">
      <div v-if="curPageItems.length <= 0">
        <el-empty :image-size="200" description="No data" />
      </div>
      <div v-else-if="isTest">
        <el-table :data="curPageItems" style="width: 100%">
          <el-table-column prop="item_id" label="对象" />
          <el-table-column prop="statusName" label="状态" />
        </el-table>
      </div>
      <div v-else>
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-bottom: 10px;
          "
        >
          <div v-if="isMultiSelect">
            <el-button size="small" @click="selectAll">全选</el-button>
            <el-button size="small" @click="unselectAll">全不选</el-button>
          </div>
          <div v-else></div>
          <el-switch
            v-model="isMultiSelect"
            inline-prompt
            active-text="多选"
            inactive-text="单选"
          />
        </div>
        <li
          v-for="(item, index) in curPageItems"
          :key="item.id"
          :class="{ selected: isSelected(item, index) }"
          @click="
            selectItem(item, index);
            emit('select', item, index);
          "
        >
          <div class="item-container">
            <el-checkbox
              v-if="isMultiSelect"
              v-model="item.isSelected"
              style="margin-right: 10px"
              size="large"
              @change="onSelectChange"
            />
            <div v-else></div>
            <div class="item-image-a">
              <img :src="item.icon" />
            </div>
            <div class="item-info">
              <div class="item-code">{{ item.item_id }}</div>
              <div class="item-name">{{ item.object_name }}</div>
            </div>
            <div class="item-image-b">
              <div v-if="item.statusIcon == null"></div>
              <div v-else>
                <img :src="item.statusIcon" alt="" />
              </div>
            </div>
          </div>
        </li>
      </div>
    </div>
    <div style="display: flex; justify-content: center">
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :total="props == null || props.items == null ? 0 : props.items.length"
        @current-change="handleCurrentChange"
        class="mt-4"
        style="border-top: 15px"
      />
    </div>
  </div>
</template>

<style>
li {
  list-style: none;
  padding: 0;
}

.selected {
  background-color: rgb(210, 210, 191);
}

.leftPanel {
  /* flex: 1; */
  /* background-color: #b7b2b7; */
  margin: 0 1px;
  /* height: 100%; */
  overflow-y: scroll;
  height: 87vh;
  flex-shrink: 0; /* 规定项目将相对于其他灵活的项目进行收缩的量，可以不受flex影响 */
  /* width: 800px; */
  /* flex: 1; */
  white-space: nowrap;
}
.item-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.item-image-a {
  margin-right: 10px;
  flex: 1;
  padding: 3px;
  border: 1px solid #ebe9e9;
}

.item-image-b {
  margin-left: 10px;
  margin-right: 1px;
  flex: 1;
}

.item-image-a img {
  width: 42px;
  height: 42px;
}

.item-image-b img {
  width: 50px;
  height: 50px;
}

.item-info {
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  /* background-color: #aaaaff; */
  width: 500px;
}

.item-code {
  font-weight: bold;
}

.item-name {
  margin-top: 5px;
}
</style>

<script>
// import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
// import progressBar from "./progressBar.vue";
// import { defineExpose, ref } from "vue";

export default {
  data() {
    return {
      isMultiSelect: false,
      testItems: [
        {
          item_id: "001",
          object_name: "Item 11111",
          image: "item1.jpg",
        },
        {
          item_id: "001",
          object_name: "Item 11111",
          image: "item2.jpg",
        },
      ],
      curPageItems: [],
      curPageIndex: 0,
      selectedIndex: -1,
      pageSize: 20,
      isTest: false,
    };
  },
  created() {
    watch(
      () => this.items,
      (newItems, oldItems) => {
        if (newItems != oldItems) {
          this.selectedIndex = -1;
          this.selectedItem = null;
          this.curPageIndex = 0;
          this.curPageItems = newItems.slice(0, this.pageSize);
        }
      }
    );
    watch(
      () => this.isMultiSelectInParent,
      (newData, oldData) => {
        console.log("change isMultiSelectInParent = > " + newData);
        this.isMultiSelect = this.isMultiSelectInParent;
      }
    );
  },
  methods: {
    handleCurrentChange(val) {
      this.curPageItems = this.items.slice(
        val * this.pageSize,
        (val + 1) * this.pageSize
      );
    },
    isSelected(item, index) {
      return item == this.selectedItem || index == this.selectedIndex;
    },
    selectItem(item, index) {
      this.selectedItem = item;
      this.selectedIndex = index;
    },
    selectAll() {
      this.curPageItems.forEach((item) => {
        item.isSelected = true;
      });
      this.onSelectChange();
    },
    unselectAll() {
      this.curPageItems.forEach((item) => {
        item.isSelected = false;
      });
      this.onSelectChange();
    },
    onSelectChange(val) {
      console.log("onSelectChange", val);
      console.log("当前选择的数据有：", this.getSelectedItems());
      this.$emit("selectMulti", this.getSelectedItems());
    },
    getSelectedItems() {
      return this.curPageItems.filter((item) => item.isSelected);
    },
    search() {
      // Perform search operation
      console.log("Search:", this.selectedOption, this.searchText);
      //window.java.test();
    },
    startResize() {
      document.addEventListener("mousemove", this.resize);
      document.addEventListener("mouseup", this.stopResize);
    },
    resize(event) {
      this.leftPanelWidth = event.clientX;
    },
    stopResize() {
      document.removeEventListener("mousemove", this.resize);
      document.removeEventListener("mouseup", this.stopResize);
    },
  },
};
</script>
<script setup>
import { defineProps, ref, defineEmits, watch } from "vue";

let props = defineProps({
  items: ref(),
  isMultiSelectInParent: ref(),
});

let emit = defineEmits(["select", "selectMulti"]);
</script>
